<template>
	<view>
		<!-- 选择门店 -->
		<view class="box">
			<view class="box-title flex vertical-center fn-25 fn-w hairline--bottom">
				<image style="width: 40rpx;" class="mr-5" src="../../static/icon/address2.png" mode="widthFix"></image>
				{{title}}
			</view>
			<view class="list">
				<view 
					class="item flex-1 flex align-between vertical-center fn-22" 
					:class="{ active: active == index }"
					 v-for="(item, index) in stores"
					:key="index" @click="handleStoresItem(index, item)"
				>
					<text>{{ item.name }}</text>
					<text class="ellipsis col-8 mr-30" style="display: block; text-align: right;">{{ item.address }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title:{
				type: String,
				default: "选择门店"
			},
			active: {
				type: String | Number,
				default: 0
			},
			stores: {
				type: Array,
				default: ()=> []
			}
		},
		data() {
			return {
				handleStoresItem(index, item) {
					this.$emit("storeschange", {index, item})
				}
			};
		}
	}
</script>

<style lang="scss">
.box {
	background-color: $color-white;
	box-shadow: 3rpx 3rpx 10rpx rgba(#eee, 0.1);
	padding: 20rpx;
	border-radius: 5rpx;
	margin-bottom: 30rpx;
	&-title {
		padding-bottom: 20rpx;
	}
	.list {
		.active {
			background-color: $color-primary !important;
		}
		.item {
			margin-top: 24rpx;
			border: 1rpx solid rgba($color: #c6c6c6, $alpha: .5);
			padding: {
				top: 20rpx;
				bottom: 20rpx;
				left: 43rpx;
			}
			background-color: #f7f5f3;
		}
	}
}
</style>
